<template>
  <div class="login-container">
      <!-- 导航栏 -->
      <van-nav-bar class="toutiao-nav-bar" title="登录">
          <van-icon slot="left" @click.native="$router.back" name="cross"  />
      </van-nav-bar>
      <!-- logo -->
      <img class="logo" src="@/assets/logo2.png" alt="">
      <!-- 表单 -->
      <van-form @submit="submit" ref="form" class="login-form">
        <van-field
            v-model="forminfo.mobile"
            name="mobile"
            icon-prefix="toutiao"
            left-icon="shouji"
            placeholder="请输入手机号"
            clearable
            type="number"
            maxlength="11"
           :rules="forminfo_rules.mobile"
        >
        </van-field>
        <van-field
            v-model="forminfo.code"
            name="code"
            icon-prefix="toutiao"
            left-icon="yanzhengma"
            placeholder="请输入验证码"
            :rules="forminfo_rules.code"
            type="number"
            maxlength="6"
        >
            <template #button>
                 <!-- 倒计时 -->
                <van-count-down v-if="btn_num_show" @finish="btn_num_show=false" format="ss s" :time="time" />
                <!-- 发送验证码按钮 -->
                <van-button v-else size="small" @click.native="send_code" native-type="button" round >发送验证码</van-button>
            </template>
        </van-field>
        <div class="login-btn" >
            <!-- native-type 类似提交功能，但是要求按钮必须放在form表现里面 -->
            <van-button  block type="info" native-type="submit">立即登录</van-button>
        </div>
    </van-form>
    <p class="tip">万能验证码： 246810</p>
    
  </div>
</template>
<script>
import { Login,SendCode } from "@/api/user"
export default {
    data(){
        return{
            // 表单绑定数据
            forminfo:{
                mobile:"17342065909",
                code:"246810"
            },
            // 表单验证规则
            forminfo_rules:{
                mobile:[
                    { required: true, message: '请填写手机号' },
                    { pattern:/^1[3|4|5|6|7|8|9|]\d{9}$/, message: '格式不正确' },
                ],
                code:[
                    { required: true, message: '请填写验证码' },
                    { pattern:/^\d{6}$/, message: '格式不正确' },
                ]
            },
            // 倒计时显示按钮
            btn_num_show:false,
            time:60*1000
        }
    },
    created(){},
    methods:{
        // 登录提交事件
        async submit(){
            // 1、获取表单数据
            const userinfo = this.forminfo;
            // 2、表单验证
            
            // 显示登录中等待框
            this.$toast.loading({
                message:"登录中...",
                forbidClick:true, // 禁用背景点击
                duration:0   // 0的时候不会消失
            })
            // 3、提交表单信息
            // 4、结果信息操作
            try {
                const { data }  = await Login(userinfo)
                this.$store.commit('SET_USER', data.data)
                this.$toast.success('登录成功')
                // 登录成功，跳回原来页面
                // 先写back，后期在优化
                this.$router.back();
            } catch (error) {
                if(error.response.status==400){
                    this.$toast.fail('手机号或验证码错误');
                }else{
                    this.$toast.fail('登录失败，请稍后重试');
                }
            }
        },
        // 发送验证码事件
        async send_code(){
            // 1、校验手机号
            try {
                await this.$refs.form.validate('mobile')
            } catch (error) {
                return console.log("校验失败");
            }
            // 2、验证通过显示倒计时
            this.btn_num_show = true;
            // 3、请求发送验证码
            try {
                 await SendCode(this.forminfo.mobile)
                 this.$toast('发送成功')
            } catch (error) {
                // 关闭倒计时
                this.btn_num_show = false;
                if(error.response.status==429){
                    this.$toast('发送太频繁了，请稍后重试')
                }else{
                    this.$toast('发送错误，稍后重试')
                }
            }
        }
    },
    components:{}
}
</script>
<style scoped lang="less">
.login-container{
    .logo{
        height: 200px;
        display: block;
        margin: 60px auto 80px;
    }
    .van-field__body .van-button{
        background-color: #ededed;
    }
    .login-btn{
        margin:50px 32px;
    }
    .tip{
        text-align:center;
        font-size: 28px;
        color: #999;
    }
}
</style>